<template>
  <van-dialog
    :show="showSearch"
    :title="lang.search_title"
    destroyOnClose
    className="custom-dialog home-search-dialog"
    :showConfirmButton="false"
    :showCancelButton="true"
    @cancel="beforeClose"
  >
    <div class="content">
      <!-- 查询框 -->
      <div class="changeGameSelectData">
        <div class="search_box">
          <NuxtImg src="/images/layout/icon-search.png" />
          <input
            type="text"
            :placeholder="lang.search_placeholder"
            class="seacrh_input"
            v-model.trim="searchValue"
            @input="search"
          />
        </div>
      </div>
      <!-- 游戏列表 -->
      <div class="game">
        <Placeholder v-if="!loadingGamesInfo.list.length" />
        <GameLoading
          v-else
          @addMore="addMore"
          :loadingGamesInfo="loadingGamesInfo"
        />
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
import GameLoading from "../GameList/GameLoading.vue";
import { getGameList } from "../GameList/const";

const lang: any = getCurrentPageLang("home");

const props = defineProps(["showSearch"]);

const emit = defineEmits(["changeShowSearch"]);

function beforeClose() {
  emit("changeShowSearch", false);
}

const allList: any = ref([]);
const searchList: any = ref([]);
const loadingGamesInfo: any = ref({
  list: [],
  percent: 0,
  loading: false,
});

const searchValue = ref("");
function search() {
  // 这里进行筛选过滤
  searchList.value = allList.value.filter((item: any) => Math.random() > 0.5);
  loadingGamesInfo.value.list = [];
  loadingGamesInfo.value.loading = false;
  loadingGamesInfo.value.percent = 0;
  setData();
}

onMounted(() => {
  allList.value = getGameList(100);
  searchList.value = allList.value || [];
  searchValue.value = "";
  loadingGamesInfo.value.list = [];
  setData();
});

watch(
  () => props.showSearch,
  (newVal) => {
    if (!newVal) return;
    searchList.value = allList.value || [];
    searchValue.value = "";
    loadingGamesInfo.value.list = [];
    setData();
  }
);

function addMore() {
  loadingGamesInfo.value.loading = true;
  setTimeout(() => {
    setData();
    loadingGamesInfo.value.loading = false;
  }, 200);
}

function setData() {
  loadingGamesInfo.value.list = searchList.value.slice(
    0,
    loadingGamesInfo.value.list.length + 28
  );
  loadingGamesInfo.value.percent = Math.floor(
    (loadingGamesInfo.value.list.length / searchList.value.length) * 100
  );
}

const route = useRoute();
watch(
  () => route.name,
  () => {
    beforeClose();
  }
);
</script>

<style scoped lang="scss">
.content {
  padding: 0.2rem 0.3rem 0.4rem;
}
.changeGameSelectData {
  gap: 0.26rem;
  margin-bottom: 0.25rem;
  display: flex;
  position: sticky;
  top: 0.25rem;
}
.game {
  position: sticky;
  top: 2rem;
  max-height: 65vh;
  overflow-y: auto;
  border-radius: 0.2rem;
  :deep(.gameBox) {
    padding: 0;
  }
}
.search_box {
  border-radius: 0.22rem;
  max-height: 0.9rem;
  display: flex;
  align-items: center;
  height: 0.9rem;
  padding-left: 0.4rem;
  width: 100%;
  background: #2c1d31;
  border-radius: 0.57rem;
  border: 0.03rem solid var(--border-color);
}
.search_box img {
  width: 0.6rem;
  box-sizing: content-box;
  padding-right: 0.2rem;
}
.search_box .seacrh_input {
  height: 100%;
  border: none;
  color: var(--theme-neutral1);
  font-size: 0.32rem;
  width: 100%;
  background: transparent;
  border-radius: 0.57rem;
  padding-right: 0.4rem;
}
.Placeholder {
  width: 50%;
  margin-left: 25%;
}
</style>
